import React, { useState } from 'react';
import { Clock, Search, Filter, Grid, List, Play, Pause, X, CheckCircle, AlertCircle, Plus, Edit, Trash2, MoreVertical, Save, Calendar, Settings, Code } from 'lucide-react';
import MenuToggle from '../components/MenuToggle';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Switch } from '@/components/ui/switch';

const TaskList = ({ toggleSidebar }) => {
  const [viewMode, setViewMode] = useState('list');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedTasks, setSelectedTasks] = useState([]);
  const [filterStatus, setFilterStatus] = useState('all');
  const [showCreateDialog, setShowCreateDialog] = useState(false);

  // 模拟定时任务数据
  const [tasks, setTasks] = useState([
    {
      id: 1,
      name: '数据备份任务',
      description: '每日凌晨2点自动备份数据库',
      type: 'backup',
      status: 'running', // running, paused, stopped, error
      schedule: '0 2 * * *',
      scheduleText: '每日 02:00',
      nextRun: '2024-01-21 02:00:00',
      lastRun: '2024-01-20 02:00:00',
      lastResult: 'success',
      createTime: '2024-01-15',
      runCount: 5
    },
    {
      id: 2,
      name: '文件清理任务',
      description: '清理临时文件和过期缓存',
      type: 'cleanup',
      status: 'running',
      schedule: '0 3 * * 0',
      scheduleText: '每周日 03:00',
      nextRun: '2024-01-21 03:00:00',
      lastRun: '2024-01-14 03:00:00',
      lastResult: 'success',
      createTime: '2024-01-10',
      runCount: 2
    },
    {
      id: 3,
      name: '报告生成任务',
      description: '生成月度使用统计报告',
      type: 'report',
      status: 'paused',
      schedule: '0 9 1 * *',
      scheduleText: '每月1日 09:00',
      nextRun: '2024-02-01 09:00:00',
      lastRun: '2024-01-01 09:00:00',
      lastResult: 'success',
      createTime: '2024-01-01',
      runCount: 1
    },
    {
      id: 4,
      name: '系统监控任务',
      description: '监控系统资源使用情况',
      type: 'monitor',
      status: 'error',
      schedule: '*/5 * * * *',
      scheduleText: '每5分钟',
      nextRun: '-',
      lastRun: '2024-01-20 14:25:00',
      lastResult: 'error',
      createTime: '2024-01-18',
      runCount: 1440
    },
    {
      id: 5,
      name: '邮件发送任务',
      description: '发送系统通知邮件',
      type: 'notification',
      status: 'stopped',
      schedule: '0 8 * * 1-5',
      scheduleText: '工作日 08:00',
      nextRun: '-',
      lastRun: '2024-01-19 08:00:00',
      lastResult: 'success',
      createTime: '2024-01-12',
      runCount: 8
    }
  ]);

  // 新任务表单数据
  const [newTask, setNewTask] = useState({
    name: '',
    description: '',
    type: '',
    enabled: true,
    schedule: {
      type: 'cron',
      cronExpression: '',
      intervalValue: 1,
      intervalUnit: 'hours'
    },
    script: '',
    timeout: 300,
    retryCount: 3,
    notifyOnSuccess: false,
    notifyOnFailure: true,
    notifyEmail: ''
  });

  const taskTypes = [
    { value: 'backup', label: '数据备份' },
    { value: 'cleanup', label: '文件清理' },
    { value: 'report', label: '报告生成' },
    { value: 'monitor', label: '系统监控' },
    { value: 'notification', label: '通知发送' },
    { value: 'custom', label: '自定义脚本' }
  ];

  const cronPresets = [
    { value: '0 0 * * *', label: '每日午夜 (00:00)' },
    { value: '0 2 * * *', label: '每日凌晨2点' },
    { value: '0 9 * * 1-5', label: '工作日上午9点' },
    { value: '0 0 * * 0', label: '每周日午夜' },
    { value: '0 0 1 * *', label: '每月1日午夜' },
    { value: '*/5 * * * *', label: '每5分钟' },
    { value: '0 */2 * * *', label: '每2小时' }
  ];

  const intervalUnits = [
    { value: 'minutes', label: '分钟' },
    { value: 'hours', label: '小时' },
    { value: 'days', label: '天' }
  ];

  const filteredTasks = tasks.filter(task => {
    const matchesSearch = task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         task.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesStatus = filterStatus === 'all' || task.status === filterStatus;
    return matchesSearch && matchesStatus;
  });

  const handleTaskSelect = (taskId) => {
    setSelectedTasks(prev => 
      prev.includes(taskId) 
        ? prev.filter(id => id !== taskId)
        : [...prev, taskId]
    );
  };

  const handleStart = (taskId) => {
    setTasks(prev => prev.map(task => 
      task.id === taskId 
        ? { ...task, status: 'running' }
        : task
    ));
  };

  const handlePause = (taskId) => {
    setTasks(prev => prev.map(task => 
      task.id === taskId 
        ? { ...task, status: 'paused' }
        : task
    ));
  };

  const handleStop = (taskId) => {
    setTasks(prev => prev.map(task => 
      task.id === taskId 
        ? { ...task, status: 'stopped' }
        : task
    ));
  };

  const handleDelete = (taskId) => {
    setTasks(prev => prev.filter(task => task.id !== taskId));
    setSelectedTasks(prev => prev.filter(id => id !== taskId));
  };

  const handleCreateTask = () => {
    // 验证表单
    if (!newTask.name.trim()) {
      alert('请输入任务名称');
      return;
    }
    
    if (!newTask.type) {
      alert('请选择任务类型');
      return;
    }

    if (newTask.schedule.type === 'cron' && !newTask.schedule.cronExpression) {
      alert('请设置执行计划');
      return;
    }

    // 创建新任务
    const id = Math.max(...tasks.map(t => t.id)) + 1;
    const currentTime = new Date().toISOString().split('T')[0];
    
    const scheduleText = newTask.schedule.type === 'cron' 
      ? cronPresets.find(p => p.value === newTask.schedule.cronExpression)?.label || newTask.schedule.cronExpression
      : `每${newTask.schedule.intervalValue}${intervalUnits.find(u => u.value === newTask.schedule.intervalUnit)?.label}`;

    const task = {
      id,
      name: newTask.name,
      description: newTask.description,
      type: newTask.type,
      status: newTask.enabled ? 'running' : 'stopped',
      schedule: newTask.schedule.type === 'cron' ? newTask.schedule.cronExpression : `*/${newTask.schedule.intervalValue} * * * *`,
      scheduleText,
      nextRun: newTask.enabled ? '2024-01-21 02:00:00' : '-',
      lastRun: '-',
      lastResult: 'success',
      createTime: currentTime,
      runCount: 0
    };

    setTasks(prev => [...prev, task]);
    
    // 重置表单
    setNewTask({
      name: '',
      description: '',
      type: '',
      enabled: true,
      schedule: {
        type: 'cron',
        cronExpression: '',
        intervalValue: 1,
        intervalUnit: 'hours'
      },
      script: '',
      timeout: 300,
      retryCount: 3,
      notifyOnSuccess: false,
      notifyOnFailure: true,
      notifyEmail: ''
    });
    
    setShowCreateDialog(false);
  };

  const getStatusBadge = (status) => {
    const statusConfig = {
      running: { color: 'bg-green-100 text-green-800', text: '运行中' },
      paused: { color: 'bg-yellow-100 text-yellow-800', text: '已暂停' },
      stopped: { color: 'bg-gray-100 text-gray-800', text: '已停止' },
      error: { color: 'bg-red-100 text-red-800', text: '错误' }
    };
    
    const config = statusConfig[status] || statusConfig.stopped;
    return (
      <Badge className={`${config.color} hover:${config.color}`}>
        {config.text}
      </Badge>
    );
  };

  const getTypeBadge = (type) => {
    const typeConfig = {
      backup: { color: 'bg-blue-100 text-blue-800', text: '备份' },
      cleanup: { color: 'bg-purple-100 text-purple-800', text: '清理' },
      report: { color: 'bg-orange-100 text-orange-800', text: '报告' },
      monitor: { color: 'bg-cyan-100 text-cyan-800', text: '监控' },
      notification: { color: 'bg-pink-100 text-pink-800', text: '通知' }
    };
    
    const config = typeConfig[type] || typeConfig.backup;
    return (
      <Badge variant="secondary" className={`${config.color} hover:${config.color}`}>
        {config.text}
      </Badge>
    );
  };

  const getStatusIcon = (status) => {
    switch (status) {
      case 'running':
        return <Play className="w-5 h-5 text-green-600" />;
      case 'paused':
        return <Pause className="w-5 h-5 text-yellow-600" />;
      case 'error':
        return <AlertCircle className="w-5 h-5 text-red-600" />;
      default:
        return <X className="w-5 h-5 text-gray-600" />;
    }
  };

  const runningCount = tasks.filter(t => t.status === 'running').length;
  const pausedCount = tasks.filter(t => t.status === 'paused').length;
  const errorCount = tasks.filter(t => t.status === 'error').length;
  const stoppedCount = tasks.filter(t => t.status === 'stopped').length;

  return (
    <>
      {/* 头部工具栏 */}
      <div className="">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                  <Clock className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    任务管理
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    管理和监控系统定时任务
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
                <input
                  type="text"
                  placeholder="搜索任务..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 pr-4 py-2 w-80 border border-material-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
                />
              </div>

              <Select value={filterStatus} onValueChange={setFilterStatus}>
                <SelectTrigger className="w-32">
                  <Filter className="w-4 h-4 mr-2" />
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部</SelectItem>
                  <SelectItem value="running">运行中</SelectItem>
                  <SelectItem value="paused">已暂停</SelectItem>
                  <SelectItem value="stopped">已停止</SelectItem>
                  <SelectItem value="error">错误</SelectItem>
                </SelectContent>
              </Select>

              <div className="flex items-center bg-material-grey-100 rounded-lg p-1">
                <Button
                  variant={viewMode === 'grid' ? 'default' : 'ghost'}
                  size="sm"
                  onClick={() => setViewMode('grid')}
                  className="px-3"
                >
                  <Grid className="w-4 h-4" />
                </Button>
                <Button
                  variant={viewMode === 'list' ? 'default' : 'ghost'}
                  size="sm"
                  onClick={() => setViewMode('list')}
                  className="px-3"
                >
                  <List className="w-4 h-4" />
                </Button>
              </div>

              <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
                <DialogTrigger asChild>
                  <Button className="bg-primary hover:bg-primary-600">
                    <Plus className="w-4 h-4 mr-2" />
                    新建任务
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
                  <DialogHeader>
                    <DialogTitle>创建定时任务</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-6">
                    {/* 基本信息 */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-medium flex items-center space-x-2">
                        <Settings className="w-5 h-5" />
                        <span>基本信息</span>
                      </h3>
                      
                      <div>
                        <Label htmlFor="name">任务名称 *</Label>
                        <Input
                          id="name"
                          value={newTask.name}
                          onChange={(e) => setNewTask(prev => ({ ...prev, name: e.target.value }))}
                          placeholder="请输入任务名称"
                        />
                      </div>

                      <div>
                        <Label htmlFor="description">任务描述</Label>
                        <Textarea
                          id="description"
                          value={newTask.description}
                          onChange={(e) => setNewTask(prev => ({ ...prev, description: e.target.value }))}
                          placeholder="请输入任务描述"
                          rows={2}
                        />
                      </div>

                      <div>
                        <Label htmlFor="type">任务类型 *</Label>
                        <Select value={newTask.type} onValueChange={(value) => setNewTask(prev => ({ ...prev, type: value }))}>
                          <SelectTrigger>
                            <SelectValue placeholder="请选择任务类型" />
                          </SelectTrigger>
                          <SelectContent>
                            {taskTypes.map(type => (
                              <SelectItem key={type.value} value={type.value}>
                                {type.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

                      <div className="flex items-center space-x-2">
                        <Switch
                          id="enabled"
                          checked={newTask.enabled}
                          onCheckedChange={(checked) => setNewTask(prev => ({ ...prev, enabled: checked }))}
                        />
                        <Label htmlFor="enabled">启用任务</Label>
                      </div>
                    </div>

                    {/* 执行计划 */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-medium flex items-center space-x-2">
                        <Clock className="w-5 h-5" />
                        <span>执行计划</span>
                      </h3>
                      
                      <div>
                        <Label>计划类型</Label>
                        <Select 
                          value={newTask.schedule.type} 
                          onValueChange={(value) => setNewTask(prev => ({ 
                            ...prev, 
                            schedule: { ...prev.schedule, type: value }
                          }))}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="cron">Cron 表达式</SelectItem>
                            <SelectItem value="interval">固定间隔</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      {newTask.schedule.type === 'cron' ? (
                        <div className="space-y-4">
                          <div>
                            <Label htmlFor="cronExpression">Cron 表达式 *</Label>
                            <Input
                              id="cronExpression"
                              value={newTask.schedule.cronExpression}
                              onChange={(e) => setNewTask(prev => ({ 
                                ...prev, 
                                schedule: { ...prev.schedule, cronExpression: e.target.value }
                              }))}
                              placeholder="例如: 0 2 * * * (每日凌晨2点)"
                            />
                          </div>

                          <div>
                            <Label>常用预设</Label>
                            <Select 
                              value={newTask.schedule.cronExpression}
                              onValueChange={(value) => setNewTask(prev => ({ 
                                ...prev, 
                                schedule: { ...prev.schedule, cronExpression: value }
                              }))}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="选择预设时间" />
                              </SelectTrigger>
                              <SelectContent>
                                {cronPresets.map(preset => (
                                  <SelectItem key={preset.value} value={preset.value}>
                                    {preset.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                      ) : (
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <Label htmlFor="intervalValue">间隔数值</Label>
                            <Input
                              id="intervalValue"
                              type="number"
                              min="1"
                              value={newTask.schedule.intervalValue}
                              onChange={(e) => setNewTask(prev => ({ 
                                ...prev, 
                                schedule: { ...prev.schedule, intervalValue: parseInt(e.target.value) || 1 }
                              }))}
                            />
                          </div>
                          <div>
                            <Label htmlFor="intervalUnit">时间单位</Label>
                            <Select 
                              value={newTask.schedule.intervalUnit}
                              onValueChange={(value) => setNewTask(prev => ({ 
                                ...prev, 
                                schedule: { ...prev.schedule, intervalUnit: value }
                              }))}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                {intervalUnits.map(unit => (
                                  <SelectItem key={unit.value} value={unit.value}>
                                    {unit.label}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                      )}
                    </div>

                    {/* 脚本配置 */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-medium flex items-center space-x-2">
                        <Code className="w-5 h-5" />
                        <span>脚本配置</span>
                      </h3>
                      
                      <div>
                        <Label htmlFor="script">执行脚本</Label>
                        <Textarea
                          id="script"
                          value={newTask.script}
                          onChange={(e) => setNewTask(prev => ({ ...prev, script: e.target.value }))}
                          placeholder="请输入要执行的脚本或命令"
                          rows={4}
                          className="font-mono text-sm"
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="timeout">超时时间 (秒)</Label>
                          <Input
                            id="timeout"
                            type="number"
                            min="1"
                            value={newTask.timeout}
                            onChange={(e) => setNewTask(prev => ({ ...prev, timeout: parseInt(e.target.value) || 300 }))}
                          />
                        </div>
                        <div>
                          <Label htmlFor="retryCount">重试次数</Label>
                          <Input
                            id="retryCount"
                            type="number"
                            min="0"
                            max="10"
                            value={newTask.retryCount}
                            onChange={(e) => setNewTask(prev => ({ ...prev, retryCount: parseInt(e.target.value) || 0 }))}
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setShowCreateDialog(false)}>
                      取消
                    </Button>
                    <Button onClick={handleCreateTask}>
                      <Save className="w-4 h-4 mr-2" />
                      创建任务
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">运行中</p>
                  <p className="text-2xl font-bold text-green-600">{runningCount}</p>
                </div>
                <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                  <Play className="w-6 h-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">已暂停</p>
                  <p className="text-2xl font-bold text-yellow-600">{pausedCount}</p>
                </div>
                <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                  <Pause className="w-6 h-6 text-yellow-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">已停止</p>
                  <p className="text-2xl font-bold text-gray-600">{stoppedCount}</p>
                </div>
                <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
                  <X className="w-6 h-6 text-gray-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">错误</p>
                  <p className="text-2xl font-bold text-red-600">{errorCount}</p>
                </div>
                <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                  <AlertCircle className="w-6 h-6 text-red-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 任务列表 */}
        <div className="mt-6">
          <div className="bg-white rounded-lg shadow-material-1 overflow-hidden">
            {/* 表头 */}
            <div className="bg-material-grey-50 border-b border-material-grey-200 px-4 py-3">
              <div className="flex items-center">
                <div className="w-8"></div>
                <div className="flex-1 grid grid-cols-12 gap-4 text-sm font-medium text-material-grey-700">
                  <div className="col-span-3">任务信息</div>
                  <div className="col-span-2">类型/状态</div>
                  <div className="col-span-2">执行计划</div>
                  <div className="col-span-2">下次执行</div>
                  <div className="col-span-2">执行次数</div>
                  <div className="col-span-1">操作</div>
                </div>
              </div>
            </div>

            {/* 任务列表 */}
            <div className="divide-y divide-material-grey-200">
              {filteredTasks.map((task) => (
                <div
                  key={task.id}
                  className={`p-4 hover:bg-material-grey-50 ${
                    selectedTasks.includes(task.id) ? 'bg-primary/5' : ''
                  }`}
                  onClick={() => handleTaskSelect(task.id)}
                >
                  <div className="flex items-center">
                    <div className="w-8 flex-shrink-0">
                      <input
                        type="checkbox"
                        checked={selectedTasks.includes(task.id)}
                        onChange={(e) => {
                          e.stopPropagation();
                          handleTaskSelect(task.id);
                        }}
                        className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
                      />
                    </div>

                    <div className="flex-1 grid grid-cols-12 gap-4 items-center">
                      <div className="col-span-3 flex items-center space-x-3">
                        {getStatusIcon(task.status)}
                        <div className="min-w-0">
                          <p className="text-sm font-medium text-material-grey-800 truncate">
                            {task.name}
                          </p>
                          <p className="text-xs text-material-grey-500 truncate">
                            {task.description}
                          </p>
                        </div>
                      </div>

                      <div className="col-span-2 space-y-1">
                        {getTypeBadge(task.type)}
                        {getStatusBadge(task.status)}
                      </div>

                      <div className="col-span-2">
                        <div className="text-sm text-material-grey-600">
                          <div>{task.scheduleText}</div>
                          <div className="text-xs text-material-grey-500">{task.schedule}</div>
                        </div>
                      </div>

                      <div className="col-span-2">
                        <span className="text-sm text-material-grey-600">
                          {task.nextRun === '-' ? '未安排' : task.nextRun}
                        </span>
                      </div>

                      <div className="col-span-2">
                        <span className="text-sm text-material-grey-600">{task.runCount} 次</span>
                      </div>

                      <div className="col-span-1 flex justify-end">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreVertical className="w-4 h-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            {task.status === 'running' ? (
                              <DropdownMenuItem onClick={() => handlePause(task.id)}>
                                <Pause className="w-4 h-4 mr-2" />
                                暂停
                              </DropdownMenuItem>
                            ) : (
                              <DropdownMenuItem onClick={() => handleStart(task.id)}>
                                <Play className="w-4 h-4 mr-2" />
                                启动
                              </DropdownMenuItem>
                            )}
                            <DropdownMenuItem onClick={() => handleStop(task.id)}>
                              <X className="w-4 h-4 mr-2" />
                              停止
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Edit className="w-4 h-4 mr-2" />
                              编辑
                            </DropdownMenuItem>
                            <DropdownMenuItem 
                              onClick={() => handleDelete(task.id)}
                              className="text-red-600"
                            >
                              <Trash2 className="w-4 h-4 mr-2" />
                              删除
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 空状态 */}
        {filteredTasks.length === 0 && (
          <div className="text-center py-12">
            <div className="w-24 h-24 mx-auto mb-4 bg-material-grey-200 rounded-full flex items-center justify-center">
              <Clock className="w-8 h-8 text-material-grey-500" />
            </div>
            <h3 className="text-lg font-medium text-material-grey-700 mb-2">
              {searchQuery ? '未找到匹配的任务' : '暂无定时任务'}
            </h3>
            <p className="text-material-grey-500">
              {searchQuery ? '尝试使用不同的关键词搜索' : '点击上方按钮开始创建定时任务'}
            </p>
          </div>
        )}
      </div>
    </>
  );
};

export default TaskList;
